<template>
	<view class="page">
		<u-navbar title="" title-color="#fff" :background="background" back-icon-color="#ffffff"
			:back-text-style="{color: '#fff'}">
			<view class="slot-wrap">
				<u-icon name="list-dot" color="#ffffff" size="36" @click="changeMode"></u-icon>
			</view>
		</u-navbar>
		<showQandA ref="showQA" :list='qa_list' @select='selectHandeler' @refresh='refreshQA' :key='comKey' :status='status'></showQandA>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				comKey: 0,
				selectFlag: false,
				qa_list: [],
				qaNum: 7,
				qaPage: 1,
				statusArray: ['loadmore', 'loading', 'nomore'],
				status: 'loadmore',
				background: {
					'background-image': 'linear-gradient(45deg, #007fd1, #013cd2)'
				},
			}
		},
		methods: {
			refreshQA() {
				this.qaPage = 1
				this.$api.getMyQuestionList(this.$store.state.access_token, '',this.qaNum,this.qaPage)
					.then(res => {
						this.qa_list = res.values.records
						this.comKey += 1
					})
			},
			changeMode(){
				this.$refs.showQA.selectQA()
			}
		},
		onReady: function(option) { //option为object类型，会序列化上个页面传递的参数
			this.$api.getMyQuestionList(this.$store.state.access_token, '', this.qaNum, this.qaPage)
				.then(res => {
					this.qa_list = res.values.records
					if(res.values.records.length<this.qaNum){
						this.status = 'nomore'
					}
					console.log(this.qa_list);
				})
		},
		onReachBottom() {
			if (this.status === 'loadmore') {
				this.qaPage += 1
				this.status = 'loading'
				this.$api.getMyQuestionList(this.$store.state.access_token, '', this.qaNum, this.qaPage)
					.then(res => {
						if (res.values.records.length === 0) {
							this.status = 'nomore'
						} else {
							res.values.records.forEach((item, index) => {
								this.qa_list.push(item)
							})
							this.status = 'loadmore'
						}
					})
			}

		}
	}
</script>

<style lang="scss">
	page {
		height: 100%;
		background-color: $uni-bg-color;
	}
	.slot-wrap {
		flex: 1; // 让slot内容占满整个导航栏的宽度
		display: flex;
		justify-content: flex-end;
		/* align-items: center; */
		margin-right: 40rpx;
	}
</style>
